<template>

  <div>
    <el-form ref="form"  label-width="80px" inline>
      <el-form-item label="菜单名称">
        <el-input v-model="queryParam.menuName" placeholder="请输菜单名称" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
      </el-form-item>
      <el-col :span="6">
        <el-button type="primary" round @click="add()">添加顶级菜单</el-button>
      </el-col>
    </el-form>



    <el-table :data="tableData" border style="width: 100%" size="mini" :loading="true"
              row-key="menuId"
              lazy
              :load="load"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

    >
      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="menuName" label="菜单名称" align="center"></el-table-column>
      <el-table-column prop="url" label="路径" align="center"></el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="addChild(scope.row.menuId)">添加下级菜单</el-button>
          <el-button size="mini" @click="handleEdit(scope.row.menuId)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDel(scope.row.menuId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
        title="角色管理"
        :visible.sync="dialogVisible"
        width="500px"
    >

      <RoleEdit :id="id" :pid="pid"  :visible.sync="dialogVisible" v-if="dialogVisible" @flush="search()"></RoleEdit>


    </el-dialog>

  </div>


</template>

<script>


import RoleEdit from './edit.vue'
import service from "@/utils/request.js";

export default {
  name: 'Menu',
  components:{
    RoleEdit
  },
  data() {
    return {
      dialogVisible:false,
      tableData: [],
      pid:'',
      queryParam:{
        menuName:''
      }
    }
  },
  methods: {
    handleDel(id){
      this.$confirm('是否删除', '确认信息') .then(() => {
        service.get("/menu/removeById/"+id).then((res) => {
          const success = res
          if(success){
            this.$message.success("删除成功");
            this.list();
          }
        })
      });
    },
    handleEdit(id){
      this.id = id;
      this.dialogVisible = true;
    },
    add(){
      //打开添加的页面
      this.id = null;
      this.dialogVisible = true;
    },
    addChild(id){
      //打开添加的页面
      this.id = null;
      this.pid = id;

      console.log("this.pid",this.pid)

      this.dialogVisible = true;
    },
    search(){
      this.list();
    },
    list() {
      service.get("/menu/top",).then((list) => {
        this.tableData = [];
        this.tableData = list;
        console.log("this.tableData-------",this.tableData);
      },this.searchForm)
    },
    load(treeNode,tree,resolve){
            console.log("treeNode",treeNode)
            console.log("tree",tree)
            service.get("/menu/top?parentId="+treeNode.menuId).then((list) => {
              resolve(list)
            })
    }
  },
  created() {
    this.list()
  }

}
</script>

<style scoped>


</style>